<template>
  <div class="dashboard-container">
    <el-row :gutter="5">
      <el-col :span="21">
        <card :data-source="infoCard" />
        <el-row :gutter="8">
          <el-col :span="6">
            <el-card>
              <DayReportTodayStats :height="reportChartHeight" />
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <TransferWeekReportTodayStats :height="reportChartHeight" />
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <OperationWeekReportTodayStats :height="reportChartHeight" />
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <MonthReportTodayStats :height="reportChartHeight" />
            </el-card>
          </el-col>
        </el-row>
        <box-list title="我的待办" :columns="workOrderColumns" :data="workOrderData">
          <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
            <template>
              <el-button title="编辑" type="text" size="mini" icon="el-icon-edit" />
              <el-button title="处理" type="text" size="mini" icon="el-icon-delete" />
            </template>
          </el-table-column>
        </box-list>
        <box-list title="我的工单" :columns="finishedWorkOrderColumns" :data="finishedWorkOrderData" />
        <box-list title="我的已办" :columns="finishedWorkOrderColumns" :data="finishedWorkOrderData" />
      </el-col>
      <el-col :span="3">
        <!-- <div class="shortcut">
          <router-link to="/weekly/workDaily">
            <div class="shortcut-block">
              <svg-icon icon-class="day" class="shortcut-icon" />
              <span class="shortcut-name"><i class="el-icon-edit"></i>填写日报</span>
            </div>
          </router-link>
          <router-link to="/weekly/transferWeekly">
            <div class="shortcut-block">
              <svg-icon icon-class="week" class="shortcut-icon" />
              <span class="shortcut-name"><i class="el-icon-edit"></i>运维周报</span>
            </div>
          </router-link>
          <router-link to="/weekly/operationSupportWeekly">
            <div class="shortcut-block">
              <svg-icon icon-class="week" class="shortcut-icon" />
              <span class="shortcut-name"><i class="el-icon-edit"></i>移交周报</span>
            </div>
          </router-link>
          <router-link to="/weekly/monthWeekly">
            <div class="shortcut-block">
              <svg-icon icon-class="month" class="shortcut-icon" />
              <span class="shortcut-name"><i class="el-icon-edit"></i>填写月报</span>
            </div>
          </router-link>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Card from '@neu/biz-core/components/Card'
import BoxList from '@neu/biz-core/components/BoxList'
import permission from '@neu/biz-core/directive/permission/index.js' // 权限判断指令
import DayReportTodayStats from '@neu/dcom-ui/components/DayReportTodayStats'
import TransferWeekReportTodayStats from '@neu/dcom-ui/components/TransferWeekReportTodayStats'
import OperationWeekReportTodayStats from '@neu/dcom-ui/components/OperationWeekReportTodayStats'
import MonthReportTodayStats from '@neu/dcom-ui/components/MonthReportTodayStats'
export default {
  name: 'Dashboard',
  components: {
    BoxList,
    Card,
    DayReportTodayStats,
    TransferWeekReportTodayStats,
    OperationWeekReportTodayStats,
    MonthReportTodayStats
  },
  directives: { permission },
  data() {
    return {
      infoCard: [ // 卡片
        { name: '代办任务', total: '50', icon: 'todo', totalColor: 'success' },
        { name: '当前告警', total: '10', icon: 'alarm', totalColor: 'danger' },
        { name: '最近巡检异常点', total: '1', icon: 'unusual', totalColor: 'warning' },
        { name: '离线设备总量', total: '0', icon: 'info', totalColor: 'primary' },
        { name: '占位', total: '0', icon: 'info', totalColor: 'primary' },
        { name: '占位', total: '0', icon: 'monitor', totalColor: 'info' }
      ],
      workOrderColumns: [
        { title: '工单号', key: 'no' },
        { title: '标题', key: 'title' },
        { title: '工单类型', key: 'type' },
        { title: '工单状态', key: 'status' },
        { title: '当前处理节点', key: 'currentNode' }
      ],
      workOrderData: [
        { no: 'TK20200821001', title: '张三电脑退库申请', type: '设备退库', status: '驳回', currentNode: '申请人提交' },
        { no: 'DH20200821001', title: '合同001到货验收', type: '到货验收', status: '进行中', currentNode: '设备归口负责人审批' },
        { no: 'TK20200821002', title: '合同002到货验收', type: '到货验收', status: '进行中', currentNode: '设备归口负责人审批' }
      ],
      finishedWorkOrderColumns: [
        { title: '工单号', key: 'no' },
        { title: '标题', key: 'title' },
        { title: '工单类型', key: 'type' },
        { title: '当前处理节点', key: 'currentNode' }
      ],
      finishedWorkOrderData: [
        { no: 'TK20200821001', title: '张三电脑退库申请', type: '设备退库', status: '驳回', currentNode: '申请人提交' },
        { no: 'DH20200821001', title: '合同001到货验收', type: '到货验收', status: '进行中', currentNode: '设备归口负责人审批' },
        { no: 'TK20200821002', title: '合同002到货验收', type: '到货验收', status: '进行中', currentNode: '设备归口负责人审批' }
      ],
      reportChartHeight: '180px'
    }
  },
  computed: {
    //
  },
  methods: {
    //
  }
}
</script>
<style scoped>
  .shortcut {
    width: 100%;
    padding: 0 30px 30px 30px;
  }

  .shortcut-block {
    text-align: center;
    border: solid 1px black;
    border-radius: 3px;
    background: #fff;
    padding: 0 0 10px 0;
    margin-bottom: 20px;
  }

  .shortcut-icon {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
  }

  .shortcut-name {
    font-size: 16px;
  }
</style>
